<template>
    <div>
        <el-card class="box-card" shadow="hover">
            <!-- 搜索表单-->
            <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-form-item label="优惠券名称" prop="roleName">
                    <el-input
                    v-model="queryParams.name"
                    placeholder="请输入优惠券名称"
                    clearable
                    size="small"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"/>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select
                    v-model="queryParams.isOverdue"
                    placeholder="状态"
                    clearable
                    size="small"
                    style="width: 240px">
                        <el-option
                        v-for="item in useStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="发放时间">
                    <el-date-picker
                    v-model="date"
                    size="small"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    <el-button 
                    icon="el-icon-plus" 
                    size="mini" 
                    @click="dialogVisible = true,dialogTitle = '优惠券发放',form = {}"
                    type="primary">
                    优惠券发放
                    </el-button>
                </el-form-item>
            </el-form>
            <!-- 优惠券列表-->
            <el-table
            :data="tableData"
            stripe
            style="width: 100%">
                <el-table-column
                prop="id"
                label="id"
                align="center">
                </el-table-column>
                <el-table-column
                prop="money"
                label="优惠券金额"
                align="center">
                </el-table-column>
                <el-table-column
                prop="name"
                label="优惠券名称"
                align="center">
                </el-table-column>
                <el-table-column
                prop="count"
                label="优惠券数量"
                align="center">
                </el-table-column>
                <el-table-column
                prop="details"
                label="优惠券说明"
                align="center">
                </el-table-column>
                <el-table-column
                prop="startDate"
                label="开始日期"
                width="100px"
                align="center">
                </el-table-column>
                <el-table-column
                prop="endDate"
                label="结束日期"
                width="100px"
                align="center">
                </el-table-column>
                <el-table-column
                prop="userScopeCode"
                label="可领取用户"
                align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.newUser === true">新用户</span>
                        <span v-else>所有用户</span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="date"
                label="状态"
                align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.overdue === true">已过期</span>
                        <span v-else>未过期</span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="useScopeValue"
                label="可使用范围"
                align="center">
                </el-table-column>
                <el-table-column
                prop="createDate"
                label="发放日期"
                width="100px"
                align="center">
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="100"
                align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-edit" style="font-size: 12px;color: #409EFF;cursor:pointer;" @click="updateCoupon(scope.row.id)">编辑</i>
                        <i class="el-icon-delete" style="font-size: 12px;color: #F56C6C;cursor:pointer;" @click="remove(scope.row.id)">删除</i>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页栏-->
            <el-pagination
                background
                align="center"
                @size-change="handleSizeChange($event,111)"
                @current-change="data()"
                :current-page.sync="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <!--优惠券发放-->
        <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="优惠券金额">
                <el-input v-model="form.money"></el-input>
            </el-form-item>
            <el-form-item label="优惠券名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="优惠券数量">
                <el-input v-model="form.count"></el-input>
            </el-form-item>
            <el-form-item label="优惠券说明">
                <el-input v-model="form.details"></el-input>
            </el-form-item>
            <el-form-item label="开始日期">
                <el-date-picker
                    v-model="form.startDate"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    style="width: 100%"
                    placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期">
                <el-date-picker
                    v-model="form.endDate"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    style="width: 100%"
                    placeholder="选择日期">
                    </el-date-picker>
            </el-form-item>
            <el-form-item label="可领取用户">
                <el-select
                v-model="form.newUser"
                placeholder="可领取用户"
                clearable
                style="width: 100%">
                    <el-option
                    v-for="user in users"
                    :key="user.value"
                    :label="user.label"
                    :value="user.value"/>
                </el-select>
            </el-form-item>
            <el-form-item label="可使用范围">
                <el-select
                v-model="form.useScopeCode"
                placeholder="可使用范围"
                clearable
                style="width: 100%">
                    <el-option
                    v-for="item in useScope"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submmit()">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>
<script>
import { list,add,del,update,coupon,inquire } from '@/api/app_pages/coupon'
import { getDicts } from '@/api/system/dict/data'
export default {
    components:{
    },
    data(){
        return {
            tableData: [],
            form: {},
            dialogVisible: false,
            size: 20,
            currentPage: 1,
            total: 0,
            dialogTitle:'',
            queryParams:{},
            users: [],
            useScope: [],
            useStatus: [],
            date:[]
        }
    },
    created(){
        this.users = [{label: '新用户',value: true,},{label: '所有用户',value: false,}]
        this.useStatus = [{label: '未过期',value: false,},{label: '已过期',value: true,}]
        getDicts('coupon_use_scope').then(res => {
            let data = []
            res.data.forEach(function (item, index) {
                data.push({label:item.dictLabel,value:item.dictValue})
            });
            this.useScope = data
        })
        this.data()
    },
    methods:{
        data(){
            list(this.size,this.currentPage).then(res => {
                this.tableData = res.rows
                this.total = parseInt(res.total)
            })
        },
        handleSizeChange(val,e) {
            this.size = val;
            this.data()
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        },
        handleQuery(){
            this.queryParams.startDate = this.date[0]
            this.queryParams.endDate = this.date[1]
            this.queryParams.pageSize = this.pageSize
            this.queryParams.pageNum = this.pageNum
            inquire(this.queryParams).then(res =>{
                this.tableData = res.rows
                this.total = parseInt(res.total)
            })
        },
        resetQuery(){
            this.queryParams = {}
            this.date = []
        },
        updateCoupon(id){
            this.dialogTitle = '编辑优惠券'
            this.dialogVisible = true
            this.form.id = id;  
            coupon(this.form.id).then(res => {
                this.form = res.data 
            })
        },
        submmit(){
            if(this.dialogTitle == '编辑优惠券'){ 
                
                new Promise((resolve,reject) =>{
                    update(this.form).then(res => {
                        this.dialogVisible = false
                        resolve()
                    })
                }).then(res => {
                    this.data()
                })     
            }else{
                this.form.isNewUser = this.form.newUser
                this.$delete(this.form,'newUser')
                new Promise((resolve,reject) =>{
                    add(this.form).then(res => {
                        this.dialogVisible = false
                        resolve()
                    }) 
                }).then(res => {
                    this.data()
                }) 
            }
        },
        remove(id){
            new Promise((resolve,reject) =>{
                del(id).then(res => {
                    resolve()
                })  
            }).then(res => {
                this.$message('删除成功')
                this.data()
            })  
        }
    }
}
</script>
<style>
    .text {
    font-size: 14px;
    }
    .item {
    margin-bottom: 18px;
    }
    .clearfix:before,
    .clearfix:after {
    display: table;
    content: "";
    }
    .clearfix:after {
    clear: both
    }
    .box-card {
    margin: 0 auto;
    }
</style>